<template>
  <div class="S_banner">
    <ul>
        
      <li @click="$root.bl=true"  :class="$root.bl?'active':''">正在热映
      </li>
      <li  @click="$root.bl=false"  :class="$root.bl?'':'active'">即将上映
      </li>
      
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {}
};
</script>
<style scoped>
.S_banner {
  height: 0.49rem;
  width: 100%;
  font-size: 0.16rem;
}
.S_banner ul {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
  display: flex;
  justify-content: space-around;
}
.S_banner li {
  margin-top: 0.15rem;
  float: left;
  text-align: center;
}
.S_banner span {
  padding-bottom: 0.08rem;
}
.S_banner li :active {
  color: orange;
  border-bottom: orange;
}
.active {
  color: orange;
  border-bottom: 0.01rem solid orange;
}
</style>